<template>
    <div>
        <ul class="lists">
            <li v-for="course in list" :key="course._id">
              <router-link :to="{name:'detail',params:{id:course._id}}">
                 <img :src="course.banner" alt="" class="list-top">
                 <div class="list-bottom">
                        <p class="course-title">{{course.name}}</p>
                        <span>¥{{course.price}}元</span>
                 </div>
              </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
     props: ["list","courseType"]
}
</script>
<style lang="stylus">
    .lists 
       a
        display flex
        margin-bottom 20px
        flex-direction row
        align-content flex-start
        align-items  flex-start
       img 
        height  80px
       .list-bottom
        display flex
        flex-direction column
        align-items flex-start
        align-content flex-start
        margin-left 20px


</style>